<%@ page import="pojo.Question" %>
<%@ page import="java.util.List" %>
<%@ page import="pojo.Paper" %><%--
  Created by IntelliJ IDEA.
  User: 81116
  Date: 2023/11/27
  Time: 23:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增试题到试卷</title>
    <jsp:include page="teacher_menu.jsp"></jsp:include>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 引入各种CSS样式表 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <%--    图标--%>
    <link rel="stylesheet" href="icon/iconfont.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4336496_3iu2a7l8bg8.css">
    <!--引入jquery和bootstrap -->
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/laydate.js"></script>
    <link href="css/laydate.css" rel="stylesheet">

    <style>
        .content{
            margin-left: 20%;
        }
        table{
            width:1000px;
            border-collapse: collapse;
        }
        #table th{
            text-align: center;
            height: 45px;
        }
        #table tbody tr:hover{
            background-color: #66afe9;
            color: white;
        }
        .content_input .search_field { /*输入框样式*/
            margin-top: 20px;
            float: left;
            width: 60%;
            height: 38px;
            border-radius: 5px;
            border: 1px solid #3388FF;
        }
        .content_input .search_btn{ /*按钮样式*/
            width: 80px;
            height: 40px;
            margin-top: 20px;
            margin-left: 30px;
            background-color:dodgerblue;
        }
        .content_input .search_btn:hover{ /*按钮覆盖样式*/
            background-color: #2e6da4;
            color: ivory;
        }
        .check-border{
            zoom: 200%;
        }
        input[type=text], select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid coral;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 16px;
        }

    </style>
</head>
<body>
<%
    String mess=(String)session.getAttribute("message");
    if(mess!=null && !"".equals(mess)){
%>
<script type="text/javascript">
    alert("<%=mess%>");
</script>
<%
        session.setAttribute("message", "");
    } %>


<div style="background-color: #66afe9;display: inline-block;margin-top: 10px;float: left;margin-left: 20%;height: 80px;width: 300px;text-align: center; border-radius:0px;">
    <h1 style="color:white;text-shadow: 2px 2px 2px dodgerblue;line-height: 40px;border-radius:2px;font-size: 25px">新增试卷</h1>
</div>
<div style="margin-left: 35%;margin-top:10px;width: 60%;height:80px;background-color: #66afe9; ">
    <form style="padding-left: 10%" method="post" action="${pageContext.request.contextPath }/searchQuestion">
        <div class="content_input">
            <%--查询--%>
            <input class="search_field" type="text" placeholder="请输入课程名称" name="c_name" id="c_name">
            <input type="submit" class="btn btn-primary search_btn" value="查询">
        </div>
    </form>
</div>
<br>
<div class="content">
    <div class="table-responsive" style="width: 93.8%">
        <label for="one" class="btn-success">单选题（分/题）：</label>
        <input type="text" id="one1" placeholder="请输入单选题分值" value="0" name="one1" oninput="checkType(this)"><br>
        <label for="two1" class="btn-success">多选题（分/题）：</label>
        <input type="text"  id="two1" placeholder="请输入多选题分值" value="0" name="two1" oninput="checkType(this)"><br>
        <label for="three1" class="btn-success">判断题（分/题）：</label>
        <input type="text" id="three1" placeholder="请输入判断题分值" value="0" name="three1" oninput="checkType(this)">
        <table class="table table-striped bg-info table-bordered" id="table" style="font-size: 20px">
            <thead>
            <tr>
                <th>选择<br>
                <th>试题ID</th>
                <th>课程</th>
                <th>题目类型</th>
                <th>题干内容</th>
                <th>标准答案</th>
                <th>选项A</th>
                <th>选项B</th>
                <th>选项C</th>
                <th>选项D</th>
            </tr>
            </thead>
            <tbody>
            <!--  展示试题信息-->
            <%
                List<Question> questions = (List<Question>) session.getAttribute("get_questions");
                if (questions == null || questions.isEmpty()) {
            %>
            <tr>
                <td colspan="10" style="text-align: center">数据为空</td>
            </tr>
            <%
            } else {
                for (Question c : questions) {
            %>
            <tr>
                <td><input type="checkbox" class="check-border" name="check" onchange="num()"></td>
                <td><%=c.getQ_id()%><input type="hidden" value="<%=c.getQ_id()%>">
                </td>
                <td><%=c.getC_name()%>
                </td>
                <td><%=c.getQ_type()%>
                </td>
                <td><%=c.getQ_content()%>
                </td>
                <td><%=c.getQ_standard()%>
                </td>
                <td><%=c.getOp_A()%>
                </td>
                <td><%=c.getOp_B()%>
                </td>
                <td><%=c.getOp_C()%>
                </td>
                <td><%=c.getOp_D()%>
                </td>
            </tr>
            <%
                    }
                }
            %>
            <tr>
                <td colspan="10"><input type="checkbox" class="check-border" id="checkAll" onchange="check_All()">全选
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    已选中[<span id="number"></span>]个</td>
            </tr>
            </tbody>
        </table>
        <button type="button" class="btn btn-success" id="add_point" style="font-size: 30px">&nbsp;&nbsp;生&nbsp;成&nbsp;试&nbsp;卷&nbsp;&nbsp;</button><br>
    </div>
    <div class="modal fade" id="addPointModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #2e6da4">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title" id="myModalLabel" style="background-color: #2e6da4">
                        <p style="color: #ebebeb">添加试题</p>
                    </h4>
                </div>
                <form action="${pageContext.request.contextPath}/addQuestionToPaper" method="post">
                    <div class="modal-body" style="color: dimgray">
                        <%
                            Paper paper =(Paper) session.getAttribute("paper");
                        %>
                        您选中了编号为<br>
                        <input id="q_id" name="q_id" readonly="readonly" style="width: 100%"><br>
                        的试题,<br>
                        单选题分值为：
                        <input id="one" name="one" readonly="readonly"><br>
                        多选题分值为：
                        <input  id="two" name="two" readonly="readonly"><br>
                        判断题分值为：
                        <input  id="three" name="three" readonly="readonly"><br>
                        确认添加到试卷id为<br>
                        <input id="p_id" name="p_id" readonly="readonly" value="<%=paper.getP_id()%>" style="width: 100%">
                        的试卷吗？<br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="submit" class="btn btn-primary">
                            提交
                        </button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<script>
    //时间选择器
    laydate.render({
        elem: '#starttime'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#endtime'
        ,type: 'datetime'
    });
    function myTrim(x) {
        return x.replace(/^\s+|\s+$/gm,'');
    }
    function checkType(input){//输入分值保证格式正确，为0，正整数或正小数，小数最多到小数点后六位
        input.value = input.value.replace(/[^\d.]/g, ''); // 只保留数字和小数点
        input.value = input.value.replace(/\.{2,}/g, "."); // 不能连续输入两个及以上小数点
        input.value = input.value.replace(/^\./, ''); // 开头不能为小数点
        input.value = input.value
            .replace(".", "$#$")
            .replace(/\./g, "")
            .replace("$#$", "."); // 只保留第一个".", 清除多余的"."
        input.value = input.value.replace(/\-/g,"");//不能输入负数
        if ( // 如果没有小数点，首位不能为类似于 01、02的值
            input.value &&
            input.value.indexOf(".") < 0 &&
            input.value != ""
        ) {
            input.value = parseFloat(input.value);
            input.value = input.value + ""; // 变回为字符串
        }
        if (// 输入过程中，只能输入六位小数,如果六位小数都为零，则清空小数点和后面的六个零
            input.value.indexOf(".") > 0 &&
            input.value.length - input.value.indexOf(".") > 6
        ) {
            let str = input.value.slice(
                input.value.indexOf("."),
                input.value.length
            );
            if (str / 1 <= 0) {
                input.value = input.value.replace(str, "");
            }
        }
    }
    $(function(){
        // 全选 or 全取消
        $('#checkAll').click(function(event) {
            var tr_checkbox = $('table tbody tr').find('input[type=checkbox]');
            tr_checkbox.prop('checked', $(this).prop('checked'));
            num();
            // 阻止向上冒泡，以防再次触发点击操作
            event.stopPropagation();
        });

        // 点击表格每一行的checkbox，表格所有选中的checkbox数 = 表格行数时，则将表头的‘checkAll’单选框置为选中，否则置为未选中
        $('table tbody tr').find('input[type=checkbox]').click(function(event) {
            var tbr = $('table tbody tr');
            $('#checkAll').prop('checked', tbr.find('input[type=checkbox]:checked').length == tbr.length ? true : false);
            // 阻止向上冒泡，以防再次触发点击操作
            event.stopPropagation();
        });

        // 点击表格行(行内任意位置)，触发选中或取消选中该行的checkbox
        $('table tbody tr').click(function() {
            $(this).find('input[type=checkbox]').click();
        });

        $("#add_point").click(function (){
            var checkLength = $("input:checkbox[name='check']:checked").length;
            var allCheckLength = $("input:checkbox[name='check']").length;
            var one=$("input[name='one1']").val();
            var two=$("input[name='two1']").val();
            var three=$("input[name='three1']").val();
            var x="单选题";
            var y="多选题";
            var z="判断题";
            var one_flag=0;
            var two_flag=0;
            var three_flag=0;//标注单选题，多选题，判断题的flag为0，选择后设为1
            if(checkLength == 0) {
                alert("请至少选择一个试题！");
                return;
            }
            //var question=new Array(allCheckLength).fill(0);
            var checkIds="";
            $("input[type='checkbox']").each(function(){ //遍历checkbox的选择状态
                if($(this).prop("checked")){ //如果值为checked表明选中了q_id
                    checkIds+=','+($(this).closest('tr').find('td').eq(1).text());//获取
                    var q_type=$(this).closest('tr').find('td').eq(3).text();
                    var type=myTrim(q_type);//消除空格
                    if(type===x){//单选题
                        one_flag=1;
                    }
                    if(type===y){
                        two_flag=1;
                    }
                    if(type===z){
                        three_flag=1;
                    }
                }

            });
            if(one_flag!=0 && (one==="0" || myTrim(one)==="")){
                alert("您选择了单选题但是并没有赋予分数，请重新输入！");
                return;
            }
            else if(two_flag!=0 && (two==="0" || myTrim(two)==="")){
                alert("您选择了多选题但是并没有赋予分数，请重新输入！");
                return;
            }
            else if(three_flag!=0 && (three==="0" || myTrim(three)==="")){
                alert("您选择了判断题但是并没有赋予分数，请重新输入！");
                return;
            }else{

                //question.push($(this).closest('tr').find('td').eq(1).text());
                $("#q_id").val(checkIds);
                $("#one").val(one);
                $("#two").val(two);
                $("#three").val(three);
                $('#addPointModal').modal({show:true})
            }

        });
    });
    <%--计数--%>
    function num() {
        //统计被选中数量
        var checknum=0;
        var myck= document.getElementsByName("check");
        for (a=0;a<myck.length;a++){
            if (myck[a].checked){
                checknum++;
            }
        }
        //如何将num这个值放在页面中
        $("#number").html(checknum);

        //完善自动全选按钮，当底下按钮全部选中，则全选按钮自动勾选
        if(checknum==myck.length){
            document.getElementById("checkAll").checked=true;
        }else {
            document.getElementById("checkAll").checked=false;
        }
    }

</script>
</body>
</html>
